<template>
  <view>
    <view class="countdown-container" v-if="nav && tiyanProduct && !haveVIP && residueTime" @click="open">
      <view class="tiyan-bg"></view>
      <view class="body">
        <view>新人福利，{{ unit(currProduct) }}全科会员</view>
        <view class="btn">优惠价 {{ tiyanProduct.price }}元</view>
      </view>
      <view class="flex v hc vc">
        <view class="time_count_down">
          <view class="time_count_down_block">{{ residueTime[0] }}</view>
          <view>:</view>
          <view class="time_count_down_block">{{ residueTime[1] }}</view>
          <view>:</view>
          <view class="time_count_down_block">{{ residueTime[2] }}</view>
        </view>
        <view style="font-size: 12px;margin-top: 5rpx">仅限一次</view>
      </view>
    </view>
    <uni-popup ref="popupTiYan" type="center" :mask-click="true" @change="onChange">
      <view class="MsgDialog-container" v-if="currProduct">
        <view class="title_container">
          <view class="title">{{ currProduct.title }}</view>
          <view class="title2">只售
            <text class="red">{{ currProduct.price }}元</text>
          </view>
          <view class="title3">仅此一次，过时不候
          </view>
        </view>
        <view class="btns_container">
          <view class="time_count_down" v-if="residueTime">
            <view class="time_count_label">截止时间</view>
            <view class="time_count_down_block">{{ residueTime[0] }}</view>
            <view>:</view>
            <view class="time_count_down_block">{{ residueTime[1] }}</view>
            <view>:</view>
            <view class="time_count_down_block">{{ residueTime[2] }}</view>
          </view>
          <view class="buy-btn red" @click="toBuy(currProduct)">少买瓶饮料，试试{{ unit(tiyanProduct) }}过科一</view>
          <view class="tips" v-if="needCheckVipProtocol">
            <radio :checked="agree" @click="agree=!agree" color="#3073f6" style="transform:scale(0.5)"/>
            <text>开通前请阅读</text>
            <text class="link" @click="toVipProtocol">《驾考会员协议》</text>
          </view>
        </view>
      </view>
      <AgreementVIPDialog ref="AgreementVIPDialog" v-if="needCheckVipProtocol"></AgreementVIPDialog>
      <Pay ref="pay" v-if="!eventBuy" @success="onPaySuccess"></Pay>
      <LoginView ref="LoginView" @login_success="onLoginSuccess"></LoginView>
      <view class="flex-row close-container justify-center">
        <image class="close" @click="close" src="https://down.qwdata.vip/app_icon/bind_merge_dialog_close.png"></image>
      </view>
    </uni-popup>
    <TiyanCountDown ref="TiyanCountDown" v-if="bottom" @openTiyan="onOpenTiyan"></TiyanCountDown>
  </view>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import Pay from "./Pay.vue";
import LoginView from "./LoginView/LoginView.vue";
import AgreementVIPDialog from "@/components/LoginView/AgreementVIPDialog.vue";
import moment from "@/vendor/day";
import TiyanCountDown from "@/components/TiyanCountDown.vue";

export default {
  name: 'TiyanDialog',
  components: {TiyanCountDown, LoginView, AgreementVIPDialog, Pay},
  props: ['eventBuy', 'nav', 'bottom'],
  data() {
    return {
      agree: true
    }
  },
  computed: {
    ...mapGetters(['mainProduct', 'tiyanProduct', 'mine', 'currentTime', 'haveVIP']),
    needCheckVipProtocol() {
      // #ifdef MP-WEIXIN
      return true
      // #endif

      // #ifndef MP-WEIXIN
      return false
      // #endif

      // return true
    },
    currProduct() {
      return this.tiyanProduct
    },
    residueTime() {
      if (!this.mine || !this.mine.tiyanExpiredAt) {
        return 0
      }

      const residueTime = Math.round((moment(this.mine.tiyanExpiredAt).valueOf() - this.currentTime) / 1000)
      if (residueTime < 0) {
        return 0
      }
      let miao = residueTime % 60
      if (miao < 10) {
        miao = '0' + miao
      }
      let fen = Math.floor(residueTime / 60) % 60
      if (fen < 10) {
        fen = '0' + fen
      }
      let xiaoshi = Math.floor(residueTime / 60 / 60) % 60
      if (xiaoshi < 10) {
        xiaoshi = '0' + xiaoshi
      }
      return [xiaoshi, fen, miao]
    }
  },
  mounted() {
  },
  destroyed() {
  },
  methods: {
    ...mapActions(['refreshUser']),

    unit(product) {
      if (!product) {
        return ''
      }
      const unitList = ['', '月', '天', '年']
      const str = product.vipDayCount + unitList[product.vipDayUnit]
      if (str === '99年') {
        return '终身'
      }
      return str
    },
    open() {
      this.$refs.popupTiYan.open()
    },
    close() {
      this.$refs.popupTiYan.close()
    },
    onChange(arg) {
      console.log('onChange', arg)
    },
    onOpenTiyan() {
      this.open()
    },
    async toBuy(product) {
      this.lastSelect = product
      if (this.eventBuy) {
        this.$emit('toBuy', {product, from: 'tiyan', mode: 'product'})
      } else {
        await this.checkProtocol()
        this.$refs.pay.open({mode: 'product', from: 'tiyan', product})
      }
    },
    async checkProtocol() {
      if (this.needCheckVipProtocol && !this.agree) {
        await this.$refs.AgreementVIPDialog.open()
        this.agree = true
      }
    },
    onLoginSuccess() {
      console.log('onLoginSuccess', this.lastSelect)
      if (this.lastSelect) {
        this.$refs.pay.open({mode: 'product', from: 'vip', product: this.lastSelect})
      }
    },
    async onPaySuccess() {
      uni.showToast({
        title: '会员支付成功！', icon: 'none', duration: 2000, mask: true
      })
      await this.refreshUser()
      this.$refs.popupTiYan.close()
      this.$emit('paySuccess')
    },
    toVipProtocol() {
      uni.navigateTo({
        url: '/pages/webview/webview?type=vip'
      })
    },
  }
}
</script>

<style scoped lang='scss'>
.countdown-container {
  height: 100rpx;
  background-color: #605add;
  overflow: hidden;
  position: relative;
  display: flex;
  color: #fff;
  font-weight: bold;

  .tiyan-bg {
    width: 140rpx;
    height: 315rpx;
    margin-left: 20rpx;
    background-size: cover;
    position: absolute;
    background-image: url("http://down.qwdata.vip/app_icon/1716658338120");
  }

  .body {
    display: flex;
    flex-direction: column;
    margin-left: 140rpx;
    font-weight: bold;
    justify-content: center;
    flex: 1;
    font-size: 16px;
    text-align: center;

    .btn {
      background: #F84928;
      color: #fff;
      border-radius: 100rpx;
      text-align: center;
      font-size: 12px;
      margin-top: 5rpx;
      padding: 5rpx 40rpx;
      align-self: center;
    }
  }

  .time_count_down {
    margin-right: 20rpx;
    display: flex;
    color: #F84928;
    align-items: center;
    font-size: 14px;
    justify-content: center;
    font-weight: normal;

    .time_count_label {
      color: #F84928;
      margin-right: 10rpx;
    }

    .time_count_down_block {
      margin-left: 10rpx;
      margin-right: 10rpx;
      background: #F84928;
      border-radius: 3px;
      color: #fff;
      font-size: 14px;
      text-align: center;
      padding: 2rpx 10rpx;
      align-items: center;
      justify-content: center;
    }
  }
}

.close-container {
  position: absolute;
  margin-top: 50upx;
  width: 604upx;

  .close {
    width: 58upx;
    height: 60upx;
  }
}

.MsgDialog-container {
  position: relative;
  padding-top: 1px;
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-position: top;
  background-image: url("http://down.qwdata.vip/app_icon/1718967937069");
  width: 598rpx;
  border-radius: 50rpx;

  .title_container {
    margin: 0 40rpx;
    margin-top: 75rpx;
    font-weight: bold;

    .red {
      color: #EA4B32;
    }

    .title {
      font-size: 26px;
    }

    .title2 {
      margin-top: 5rpx;
      font-size: 28px;
      margin-bottom: 5rpx;
    }

    .title3 {
      font-size: 20px;
      color: #EA4B32;
    }
  }

  .block {
    display: flex;
    height: 162rpx;
    margin-top: 30rpx;
    line-height: 162rpx;
    margin-left: 50rpx;
    margin-right: 50rpx;

    .price {
      color: #fff;
      font-size: 25px;
      width: 170rpx;
      font-weight: bold;
      align-items: baseline;
      justify-content: center;
      display: flex;
      //background-color: rgba(13, 148, 255, 0.3);
      .unit {
        font-size: 14px;
      }
    }

    .label {
      flex: 1;
      //background-color: rgba(13, 148, 255, 0.6);
      text-align: right;
      margin-right: 40rpx;
      font-size: 20px;
      font-weight: bold;
      color: #b95c3e;
    }

    //background-color: rgba(13, 148, 255, 0.3);
  }

  .oldPrice {
    color: #999;
    margin-top: 10rpx;
    text-align: center;
    font-size: 14px;
  }

  .btns_container {
    margin-left: 42rpx;
    margin-right: 42rpx;
    margin-top: 400rpx;

    .time_count_down {
      display: flex;
      margin-top: 20rpx;
      color: #F84928;
      align-items: center;
      font-size: 14px;
      justify-content: center;
      margin-bottom: 20rpx;

      .time_count_label {
        color: #F84928;
        margin-right: 10rpx;
      }

      .time_count_down_block {
        margin-left: 10rpx;
        margin-right: 10rpx;
        background: #F84928;
        border-radius: 3px;
        color: #fff;
        font-size: 14px;
        text-align: center;
        padding: 2rpx 10rpx;
        align-items: center;
        justify-content: center;
      }
    }

    .buy-btn {
      height: 96rpx;
      background-image: linear-gradient(112deg, #141819 0%, #1B2229 44%, #2B313E 100%);
      font-size: 17px;
      color: #FDE5B9;
      border-radius: 54rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 24rpx;
      font-weight: bold;

      &.red {
        color: #fff;
        background-image: linear-gradient(106deg, #E97A59 7%, #F15642 48%, #E64428 98%);
      }

      &:last-child {
        margin-bottom: 50rpx;
      }
    }

    .tips {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      margin-top: 15rpx;
      margin-bottom: 15rpx;
      font-size: 12px;
      color: #666;

      .link {
        color: #837760;
      }
    }
  }

  .close-btn {
    position: absolute;
    right: 0;
    top: 0;
    padding: 40rpx;

    .icon {
      width: 24rpx;
      height: 24rpx;
    }
  }
}
</style>
